<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>script元素的阻塞(Blocking of script elements)</title>
  <!-- 
  在JavaScript中，脚本元素（script）的加载和执行对网页的渲染性能和用户体验有着重要影响。脚本的阻塞行为是指在浏览器加载和执行脚本时，可能会阻止其他内容的渲染。
  一、脚本元素的默认行为
  1. 阻塞加载：
    - 默认情况下，script元素的加载是阻塞的，这意味着浏览器在遇到脚本时会暂停HTML文档的解析，直到脚本加载并执行完成。
    - 这种行为会导致网页的渲染延迟，尤其是在脚本较大或网络较慢的情况下。

  2. 影响渲染：
    - 当浏览器遇到一个阻塞脚本时，它会停止解析HTML，直到该脚本完成加载和执行。这可能会导致用户在页面加载时看到空白或部分内容，影响用户体验。

  二、避免阻塞的方式
  1. 使用 async 属性：
    - 在script标签中添加async属性，表示该脚本可以异步加载。浏览器会继续解析HTML文档，而不等待脚本加载完成。
    - 一旦脚本加载完成，它会立即执行，但执行顺序不一定与在文档中的位置相同。

  2. 使用 defer 属性：
    - 在script标签中添加defer属性，表示该脚本将在文档解析完成后执行。浏览器会继续解析HTML文档，并在文档完全加载后执行所有带有defer属性的脚本。
    - defer脚本会按照它们在文档中的顺序执行。

  3. 将脚本放在文档底部：
    - 将script标签放在/body标签结尾之前，可以确保在执行脚本之前，整个文档已经解析完毕。这是一个常见的优化方法。

  总结
  - 默认情况下，script元素的加载是阻塞的，会影响页面的渲染性能。
  - 为了避免阻塞，可以使用async和defer属性，或者将脚本放在文档的底部。
  - 通过合理地管理脚本的加载和执行，可以提高网页的加载速度和用户体验。
   -->
</head>
<body>


  <script src="./js/test.js"></script>
  <script>
    debugger
    var boxEl = document.querySelector(".box")
    console.log("获取box元素2", boxEl)
  </script>

  <div class="box"></div>
  
</body>
</html>